<template>
    <customNavigationBar title="我的钱包" :isBack="false" bgc="transparent" />

    <view class="dataBoard">
        <view class="title">我的资产</view>

        <view class="datas" v-if="userRole == 0">
            <view class="box">
                <view class="big">
                    <view class="num">{{ walletInfo?.totalCbt }}</view>
                    <view class="text">
                        <image src="/static/common/icon_coin.png" mode=""></image>
                        总积分（CBT）个
                    </view>
                    <view class="text blue" @click="CBTRulePop" v-if="isPromotionShow">CBT使用规则</view>
                </view>

                <view class="small">
                    <view class="text">奖励余额（元）</view>
                    <view class="num">{{ walletInfo?.rewardBalance }}</view>
                </view>
            </view>

            <view class="box">
                <view class="small">
                    <view class="text">可兑换积分（CBT）个</view>

                    <view class="num">
                        {{ walletInfo?.cbtBalance.toFixed(2) }}
                        <view @click="CBTtoMoney">转换</view>
                    </view>
                </view>

                <view class="small">
                    <view class="text">累计提成（元）</view>

                    <view class="num">{{ walletInfo?.totalCommissionBalance }}</view>
                </view>
                <view class="small">
                    <view class="text">可提现金额（元）</view>

                    <view class="num">
                        {{ walletInfo?.withdrawBalance }}
                        <view @click="withdrawal">提现</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="datas" v-else>
            <view class="box">
                <view class="small">
                    <view class="text">总账户余额（元）</view>

                    <view class="num">{{ walletInfo?.balance }}</view>
                </view>
                <view class="small">
                    <view class="text">奖励余额（元）</view>

                    <view class="num">{{ walletInfo?.totalRewardBalance }}</view>
                </view>
                <view class="small">
                    <view class="text">冻结金额（元）</view>

                    <view class="num">{{ walletInfo?.freezeBalance }}</view>
                </view>
            </view>

            <view class="box">
                <view class="small">
                    <view class="text">累计提成（元）</view>
                    <view class="num">
                        {{ walletInfo?.totalCommissionBalance }}
                    </view>
                </view>
                <view class="small">
                    <view class="text">可提现金额（元）</view>
                    <view class="num">
                        {{ walletInfo?.withdrawBalance }}
                        <view @click="withdrawal">提现</view>
                    </view>
                </view>

                <view class="small" v-if="userRole != 4">
                    <view class="text">未缴纳代理费用（元）</view>
                    <view class="num">
                        {{ walletInfo?.agentAmount - +walletInfo?.agentPayAmount }}
                        <view @click="goAgencyFeePay" v-if="+walletInfo?.agentPayAmount < walletInfo?.agentAmount">待补缴</view>
                    </view>
                </view>
            </view>
        </view>
    </view>

    <view class="dataDetails">
        <view class="selectBar">
            <view class="selectOption">
                <view v-for="(item, index) in selectTypeList" :key="item" class="item" :class="index == selectedType && 'active'" @click="typeBarChange(index)">
                    {{ item }}
                </view>
            </view>

            <view class="filterBox" @click="filterPopShow">
                <image src="/static/common/icon_filter.png"></image>
                <view>筛选</view>
            </view>
        </view>

        <swiper class="swiper" :current="selectedType" @change="swiperChange">
            <swiper-item v-if="userRole == 0">
                <scroll-view scroll-y="true" class="scrollView" @scrolltolower="scrolltolower(0)">
                    <view class="items" v-if="CBTDetail?.records.length != 0">
                        <view class="item" v-for="item in CBTDetail?.records" :key="item.id">
                            <view class="infomation">
                                <view class="title">{{ item.operation }}</view>
                                <view class="time">{{ item.createAt }}</view>
                            </view>
                            <view class="num">{{ item.amount }}</view>
                        </view>
                    </view>

                    <view v-else class="noData">暂无数据</view>
                </scroll-view>
            </swiper-item>
            <swiper-item>
                <scroll-view scroll-y="true" class="scrollView" @scrolltolower="scrolltolower(1)">
                    <view class="items" v-if="commissionDetail?.records.length != 0">
                        <view class="item" v-for="item in commissionDetail?.records" :key="item.id">
                            <view class="infomation">
                                <view class="title">{{ item.operation }}</view>
                                <view class="time">{{ item.createAt }}</view>
                            </view>
                            <view class="num">￥{{ item.amount }}</view>
                        </view>
                    </view>
                    <view v-else class="noData">暂无数据</view>
                </scroll-view>
            </swiper-item>
            <swiper-item>
                <scroll-view scroll-y="true" class="scrollView" @scrolltolower="scrolltolower(2)">
                    <view class="items" v-if="withdrawalDetail?.records.length != 0">
                        <view class="item" v-for="item in withdrawalDetail?.records" :key="item.id">
                            <view class="infomation">
                                <view class="title">{{ `提现至${item.withdrawalChannel}￥${item.withdrawalAmount}` }}</view>
                                <view class="time">{{ item.createAt }}</view>
                            </view>
                            <view class="num">
                                <view v-if="item.status == -2" class="fail">提现失败</view>
                                <view v-else-if="item.status == -1" class="fail">拒绝提现</view>
                                <view v-else-if="item.status == 1" class="success">审核通过</view>
                                <view v-else-if="item.status == 2" class="success">提现完成</view>
                                <view v-else>￥ {{ item.applyAmount }}</view>
                            </view>
                        </view>
                    </view>
                    <view v-else class="noData">暂无数据</view>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>

    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" :is-mask-click="false">
        <view class="popupContent">
            <view class="close">
                <image src="/static/common/icon_close.png" @click="closePopup"></image>
            </view>
            <view class="popupTop">
                <view class="title">订单单号</view>

                <input type="number" v-model.number="filterParams.orderId" />
            </view>

            <view class="popupTop">
                <view class="title">时间范围</view>
                <uni-datetime-picker v-model="TimeRange" type="daterange" return-type="string" @change="dateChange" />
            </view>

            <view class="buttons">
                <view @click="resetFilterParams">重置</view>
                <view class="confirm" @click="resetFilterConfirm">确定</view>
            </view>
        </view>
    </uni-popup>

    <uni-popup ref="adPopup" type="center" :is-mask-click="false">
        <view class="adContent">
            <view class="time">倒计时{{ closeTime }}秒</view>

            <view class="adBox">
                <image :src="ad.adUrl" mode="aspectFit"></image>
            </view>

            <view class="close">
                <image src="/static/common/icon_close_circle.png"></image>
            </view>
        </view>
    </uni-popup>
    <uni-popup ref="CBTrulePopup" type="center" mask-background-color="rgba(0,0,0,0)">
        <view class="CBTruleContent">
            <view class="title">CBT使用规则</view>
            <view>
                <text>
                    积分（CBT）由悦居云服平台赠送给悦居推客，是对悦居推客推广用户的奖励。悦居推客通过看平台广告获得提现奖励；按照悦居推客看广告的次数，把积分（CBT）转换为现金，让悦居推客提取看广告的奖励。
                </text>
                <text>
                    推广规则：悦居推客推广一个用户，平台奖励推客65个积分（CBT），间接推荐一个用户再获得15个积分（CBT），在每个自然日的早上5:00会按照总积分（CBT）数量的万分之五比例进行释放，释放为可兑换积分。
                </text>

                <text>
                    可兑换积分，在悦居推客看平台广告时，可按照1积分（CBT）兑换1元可提现金额的规则进行兑换。积分（CBT）是平台赠送给悦居推客，是对悦居推客推广用户的奖励，悦居推客看广告后兑现为提现金额，用于对悦居推客看平台广告的现金奖励。
                </text>
            </view>
        </view>
    </uni-popup>
</template>

<script setup lang="ts">
import { ref, reactive, toRaw } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { financeApis, userApis } from '@/utils/apis';

const userRole = ref(null); //0推广 1管家 2 运营中心
const selectedType = ref(0);
const selectTypeList = ref([]);
const TimeRange = ref([]);

const filterParams = ref({
    orderId: '',
    startDate: '',
    endDate: ''
});

const resetFilterParams = () => {
    filterParams.value = {
        orderId: '',
        startDate: '',
        endDate: ''
    };
    TimeRange.value = [];
};
const resetFilterConfirm = () => {
    if (TimeRange.value.length === 0) {
        filterParams.value.startDate = '';
        filterParams.value.endDate = '';
    } else {
        filterParams.value.startDate = TimeRange.value[0];
        filterParams.value.endDate = TimeRange.value[1];
    }

    if (userRole.value == 0) {
        pageParamsList.value[selectedType.value] = {
            pageNum: 1,
            pageSize: 10
        };

        switch (selectedType.value) {
            case 0:
                getCBTList();
                break;
            case 1:
                getCommissionList();
                break;
            case 2:
                getWithdrawalList();
                break;
        }
    } else {
        pageParamsList.value[selectedType.value + 1] = {
            pageNum: 1,
            pageSize: 10
        };

        switch (selectedType.value) {
            case 0:
                getCommissionList();
                break;
            case 1:
                getWithdrawalList();
                break;
        }
    }

    closePopup();
};

const dateChange = (e) => {
    TimeRange.value = e;
};

// 页数  CBT 提成 提现
const pageParamsList = ref([
    {
        pageNum: 1,
        pageSize: 10
    },
    {
        pageNum: 1,
        pageSize: 10
    },
    {
        pageNum: 1,
        pageSize: 10
    }
]);

const isPromotionShow = ref(true);

onShow(async () => {
    userRole.value = JSON.parse(uni.getStorageSync('userInfomation')).identityType;
    isPromotionShow.value = uni.getStorageSync('isPromotionShow');

    await getData();
    if (userRole.value == 0) {
        selectTypeList.value = ['CBT收入明细', '收入明细', '提现明细'];
        await getCBTList();
    } else {
        selectTypeList.value = ['收入明细', '提现明细'];
    }
    getCommissionList();
    getWithdrawalList();
});

// 获取资产数据
const walletInfo = ref(null);
const getData = async () => {
    let res = await financeApis.getWalletInfo();
    walletInfo.value = res.data;
};

const scrolltolower = async (index) => {
    switch (index) {
        case 0:
            if (pageParamsList.value[0].pageNum < CBTDetail.value.pages) {
                pageParamsList.value[0].pageNum++;
                getCBTList();
            }
            break;

        case 1:
            if (pageParamsList.value[1].pageNum < commissionDetail.value.pages) {
                pageParamsList.value[1].pageNum++;
                getCommissionList();
            }
            break;

        case 2:
            if (pageParamsList.value[1].pageNum < withdrawalDetail.value.pages) {
                pageParamsList.value[2].pageNum++;
                getWithdrawalList();
            }
            break;
        default:
            break;
    }
};

// 获取cbt明细
const CBTDetail = ref(null);
const getCBTList = async () => {
    let res = await financeApis.getCBTList({ ...filterParams.value, ...pageParamsList.value[0] });

    if (res.data.current == 1) {
        CBTDetail.value = res.data;
    } else {
        if (CBTDetail.value.current != res.data.current) {
            let records = [...CBTDetail.value.records, ...res.data.records];
            CBTDetail.value = { ...res.data, records };
        }
    }
};
// 获取提成明细
const commissionDetail = ref(null);
const getCommissionList = async () => {
    let res = await financeApis.getCommissionList({ ...filterParams.value, ...pageParamsList.value[1] });

    if (res.data.current == 1) {
        commissionDetail.value = res.data;
    } else {
        if (commissionDetail.value.current != res.data.current) {
            let records = [...commissionDetail.value.records, ...res.data.records];
            commissionDetail.value = { ...res.data, records };
        }
    }
};
// 获取提现明细
const withdrawalDetail = ref(null);
const getWithdrawalList = async () => {
    let res = await financeApis.getWithdrawalList({ ...filterParams.value, ...pageParamsList.value[2] });

    if (res.data.current == 1) {
        withdrawalDetail.value = res.data;
    } else {
        if (withdrawalDetail.value.current != res.data.current) {
            let records = [...withdrawalDetail.value.records, ...res.data.records];
            withdrawalDetail.value = { ...res.data, records };
        }
    }
};

const swiperChange = (e) => {
    typeBarChange(e.detail.current);
};

const typeBarChange = (index) => {
    selectedType.value = index;
    TimeRange.value = [];
    filterParams.value = {
        orderId: '',
        startDate: '',
        endDate: ''
    };
};
// 代理费是否交齐
const goAgencyFeePay = () => {
    uni.navigateTo({
        url: '/pages_finance/agencyFeePay/agencyFeePay'
    });
};

const CBTrulePopup = ref();
const CBTRulePop = () => {
    CBTrulePopup.value.open();
};

const ad = ref({
    adUrl: '',
    cbt: '',
    flowId: '',
    contentId: ''
});
const adPopup = ref();
const closeTime = ref(5);
const timer = ref(null);
const CBTtoMoney = async () => {
    let res = await financeApis.getTodayTransformCBT();

    if (res.data == 0) {
        uni.showModal({
            title: '您今日CBT转换次数已达上限'
        });
        return;
    }

    ad.value = {
        ...res.data,
        adUrl: res.data.adUrl[Math.floor(res.data.adUrl.length * Math.random())]
    };

    timer.value = setInterval(() => {
        closeTime.value--;
        if (closeTime.value === 0) {
            closeAdPopup();
        }
    }, 1000);

    adPopup.value.open();
};

const closeAdPopup = () => {
    adPopup.value.close();
    clearInterval(timer.value);
    timer.value = null;
    closeTime.value = 5;
    transformCBT();
};

const transformCBT = async () => {
    financeApis
        .CBTtoMoneySubmit({
            cbt: ad.value.cbt,
            flowId: ad.value.flowId
        })
        .then(async (res) => {
            await financeApis.adNumAdd({
                contentId: ad.value.contentId
            });

            ad.value = {
                adUrl: '',
                cbt: '',
                flowId: '',
                contentId: ''
            };

            uni.showToast({
                icon: 'none',
                title: '转换成功'
            });

            getData();
        });
};

// 企业用户 公司信息
const CompanyInfo = ref(null);
onShow(async () => {
    if (userRole.value == '4') {
        let res = await userApis.getCompanyInfo();
        CompanyInfo.value = res.data;
    } else {
        getAuthenticationInfo();
    }
    getBinddingList();
});
// 普通用户实名信息
const isAuthSuccess = ref(false);
let authenticationInfo = reactive(null);
const getAuthenticationInfo = () => {
    authenticationInfo = JSON.parse(uni.getStorageSync('userInfomation')).authentication;
    isAuthSuccess.value = !!authenticationInfo.authenticationName;
};

// 银行卡信息
const binddingInfomation = ref(null);
const getBinddingList = async () => {
    let res = await userApis.getBankDetail();
    binddingInfomation.value = res.data;
};

const withdrawal = () => {
    if (userRole.value == 4) {
        if (CompanyInfo.value.status == 0) {
            if (CompanyInfo.value.companyName) {
                uni.showModal({
                    title: '提示',
                    content: '企业用户提现需要进行企业身份认证和绑定银行公户，您的企业身份认证还未通过，请耐心等待'
                });
                return;
            } else {
                uni.showModal({
                    title: '提示',
                    content: '企业用户提现需要进行企业身份认证和绑定银行公户，您还未进行企业身份认证，请先进行企业身份认证',
                    confirmText: '去认证',
                    success(res) {
                        if (res.confirm) {
                            uni.navigateTo({
                                url: '/pages_user/setCompanyDetail/setCompanyDetail'
                            });
                        }
                    }
                });
                return;
            }
        } else if (CompanyInfo.value.status == -1) {
            uni.showModal({
                title: '提示',
                content: '企业用户提现需要进行企业身份认证和绑定银行公户，您的企业身份认证未通过，请重新认证',
                confirmText: '去认证',
                success(res) {
                    if (res.confirm) {
                        uni.navigateTo({
                            url: '/pages_user/setCompanyDetail/setCompanyDetail'
                        });
                    }
                }
            });
            return;
        }

        if (binddingInfomation.value.bankName) {
            if (binddingInfomation.value.xmtrBankStatus == 1) {
                uni.showModal({
                    title: '提示',
                    content: '企业用户提现需要进行企业身份认证和绑定银行公户，您提交了银行公户信息但还未审核通过，请通过后重试'
                });
                return;
            }

            if (binddingInfomation.value.xmtrBankStatus == 3) {
                uni.showModal({
                    title: '提示',
                    content: '企业用户提现需要进行企业身份认证和绑定银行公户，您的银行公户信息未审核通过，请重新绑定',
                    confirmText: '去绑定',
                    success(res) {
                        if (res.confirm) {
                            uni.navigateTo({
                                url: '/pages_user/banddingBank/banddingBank'
                            });
                        }
                    }
                });
                return;
            }
        } else {
            uni.showModal({
                title: '提示',
                content: '企业用户提现需要进行企业身份认证和绑定银行公户，您还未绑定银行公户，请绑定后重试',
                confirmText: '去绑定',
                success(res) {
                    if (res.confirm) {
                        uni.navigateTo({
                            url: '/pages_user/banddingBank/banddingBank'
                        });
                    }
                }
            });
            return;
        }
    } else {
        if (binddingInfomation.value.xmtrStatus) {
            if (binddingInfomation.value.xmtrStatus == 1) {
                uni.showModal({
                    title: '提示',
                    content: '为了保障您的权益，提现前需要进行实名认证和绑定银行账户，您的实名认证还在审核中，请实名认证通过后重试'
                });
                return;
            }

            if (binddingInfomation.value.xmtrStatus == 3) {
                uni.showModal({
                    title: '提示',
                    content: '为了保障您的权益，提现前需要进行实名认证和绑定银行账户，您的实名认证没有成功，请重新进行实名认证',
                    confirmText: '去实名',
                    success(res) {
                        if (res.confirm) {
                            uni.navigateTo({
                                url: '/pages_user/realNameAuth/realNameAuth'
                            });
                        }
                    }
                });
                return;
            }

            if (binddingInfomation.value.xmtrBankStatus == 1) {
                uni.showModal({
                    title: '提示',
                    content: '为了保障您的权益，提现前需要进行实名认证和绑定银行账户，您提交的银行卡账户还在审核中，请审核通过后重试'
                });
                return;
            }

            if (binddingInfomation.value.xmtrBankStatus == 3) {
                uni.showModal({
                    title: '提示',
                    content: '为了保障您的权益，提现前需要进行实名认证和绑定银行账户，您提交的银行卡账户审核不成功，请重新提交审核通过后重试'
                });
                return;
            }
        } else {
            uni.showModal({
                title: '提示',
                content: '为了保障您的权益，提现前需要进行实名认证和绑定银行账户，您还未进行实名，请实名认证后重试',
                confirmText: '去实名',
                success(res) {
                    if (res.confirm) {
                        uni.navigateTo({
                            url: '/pages_user/realNameAuth/realNameAuth'
                        });
                    }
                }
            });
            return;
        }
    }

    uni.navigateTo({
        url: '/pages_finance/withdrawal/withdrawal'
    });
};

const popup = ref();
const filterPopShow = () => {
    popup.value.open();
    setTimeout(() => {
        uni.hideTabBar();
    }, 100);
};
const closePopup = () => {
    popup.value.close();
    setTimeout(() => {
        uni.showTabBar();
    }, 100);
};
</script>

<style lang="scss">
page {
    background: linear-gradient(60deg, #e8f6ff 0%, #f2f3f5 100%);
}
</style>
<style lang="scss" scoped>
.dataDetails {
    padding: 18rpx 24rpx;
    width: 100%;
    border-radius: 16rpx;

    .selectBar {
        width: 100%;
        padding: 18rpx 24rpx;
        background-color: #fff;
        border-radius: 16rpx 16rpx 0 0;

        display: flex;
        justify-content: space-between;

        .selectOption {
            display: flex;
            gap: 30rpx;

            .item {
                position: relative;
                font-size: 28rpx;
                color: #999999;

                &.active {
                    font-size: 28rpx;
                    color: #333333;
                }

                &.active::after {
                    content: '';
                    position: absolute;
                    bottom: -12rpx;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 48rpx;
                    height: 8rpx;
                    background: #2c72ff;
                    border-radius: 4rpx 4rpx 4rpx 4rpx;
                }
            }
        }
        .filterBox {
            display: flex;
            align-items: center;
            gap: 10rpx;
            image {
                width: 24rpx;
                height: 24rpx;
            }
            view {
                font-size: 24rpx;
                color: #999999;
            }
        }
    }

    .swiper {
        width: 100%;
        height: 45vh;
        padding: 16rpx 32rpx;
        background-color: #fff;
        border-radius: 0 0 16rpx 16rpx;
    }

    .scrollView {
        width: 100%;
        height: 50vh;
        .items {
            .item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 16rpx;
                padding-bottom: 16rpx;
                border-bottom: 2rpx solid #e4e4e6;

                &:last-child {
                    border: none;
                    margin-bottom: 0;
                    padding-bottom: 0;
                }
                .infomation {
                    .title {
                        font-size: 28rpx;
                        color: #333333;
                    }
                    .time {
                        margin-top: 8rpx;
                        font-size: 22rpx;
                        color: #b3b3b3;
                    }
                }
                .num {
                    font-size: 26rpx;
                    text-align: right;
                    color: #333333;

                    .fail {
                        color: #ff6543;
                    }
                    .success {
                        color: #2c72ff;
                        display: flex;
                        align-items: center;
                        gap: 20rpx;
                        .button {
                            padding: 0 12rpx;
                            height: 40rpx;
                            line-height: 40rpx;
                            border-radius: 8rpx;
                            background-color: #2c72ff;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}

.dataBoard {
    width: 100%;
    padding: 0 24rpx 20rpx;

    .title {
        font-size: 32rpx;
        color: #333333;
        margin-bottom: 26rpx;
    }

    .datas {
        width: 100%;
        display: flex;
        gap: 20rpx;

        .box {
            flex: 1;
            .big {
                height: calc(144rpx * 2 + 20rpx);
                border-radius: 16px;
                background: #ffffff;
                margin-bottom: 20rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 20rpx;
                .num {
                    font-weight: bold;
                    font-size: 34rpx;
                    color: #333333;
                    margin-bottom: 30rpx;
                }
                .text {
                    display: flex;
                    align-items: center;
                    gap: 11rpx;
                    font-size: 28rpx;
                    color: #999999;
                    white-space: nowrap;

                    &.blue {
                        margin-top: 12rpx;
                        font-size: 20rpx;
                        color: #2c72ff;
                        text-decoration: underline;
                        text-underline-offset: 5rpx;
                    }

                    image {
                        width: 28rpx;
                        height: 28rpx;
                    }
                }
            }

            .small {
                width: 100%;
                height: 144rpx !important;
                border-radius: 16rpx;
                background: #ffffff;
                margin-bottom: 20rpx;
                padding: 20rpx;
                &:last-child {
                    margin-bottom: 0;
                }
                .text {
                    white-space: nowrap;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #999999;
                    margin-bottom: 18rpx;
                }
                .num {
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #333333;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    view {
                        font-weight: 400 !important;
                        font-size: 28rpx;
                        color: #2c72ff !important;
                    }
                }
            }
        }
    }
}

.popupContent {
    width: 100%;
    padding: 24rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
    background: #ffffff;
    border-radius: 24rpx 24rpx 0rpx 0rpx;

    .close {
        margin-left: auto;
        width: 36rpx;
        height: 36rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
            width: 26rpx;
            height: 26rpx;
        }
    }

    .popupTop {
        width: 100%;
        margin-bottom: 30rpx;
        .title {
            font-size: 28rpx;
            color: #333333;
            margin-bottom: 18rpx;
        }
        input {
            width: 100%;
            box-sizing: border-box;
            height: 68rpx;
            background: #f2f3f5;
            border-radius: 8rpx;
            padding: 0 24rpx;
            font-size: 28rpx;
            color: #333333;
            line-height: 68rpx;

            &::placeholder {
                color: #e4e4e6;
            }
        }
    }

    .buttons {
        margin-top: 48rpx;
        display: flex;
        align-items: center;
        gap: 46rpx;
        view {
            flex: 1;
            height: 64rpx;
            background: #e4e4e6;
            border-radius: 44rpx;
            font-size: 28rpx;
            color: #000000;
            color: #000000;
            line-height: 64rpx;
            text-align: center;
        }
        .confirm {
            color: #fff;
            background: #2c72ff;
        }
    }
}

.noData {
    padding: 40rpx;
    text-align: center;
    font-size: 28rpx;
    color: #ccc;
}

.adContent {
    position: relative;

    .time {
        width: 136rpx;
        height: 52rpx;
        z-index: 5;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 10rpx;
        font-size: 24rpx;
        color: #ffffff;
        line-height: 52rpx;
        text-align: center;
        position: absolute;
        top: 32rpx;
        right: 32rpx;
    }
    .adBox {
        width: 600rpx;
        height: 800rpx;
        background: #ffffff;
        border-radius: 32rpx;
        overflow: hidden;
        image {
            width: 100%;
            height: 100%;
        }
    }

    .close {
        margin: 60rpx auto 0;
        width: 60rpx;
        height: 60rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
}

.CBTruleContent {
    width: 600rpx;
    padding: 30rpx 24rpx 45rpx;
    background: #ffffff;
    border-radius: 32rpx;
    overflow: hidden;
    box-shadow: 0 0 40rpx 10rpx rgba(44, 114, 255, 0.2);

    view {
        text {
            text-indent: 1em;
            display: block;
            font-size: 24rpx;
            color: #666;
            line-height: 1.5;
        }
    }

    .title {
        width: 100%;
        padding: 24rpx 0;
        text-align: center;
        font-size: 36rpx;
        color: #2c72ff;
    }
}
</style>
